<template>
  <div>

   <!-- <basic-container>

    <basic-container>
      <h3>特作所物联管理平台
      </h3>
    </basic-container> -->
  <!--  <el-row :span="24">
      <el-col :md="7"
              :xs="24"
              :sm="24">
        <basic-container>
          <div class="wel-info">
            <div class="img-border" >
              <a href="#">
                <div class="img">
                  <img v-if="!userInfoX.headUrl" src="./../../public/img/indexlog/user.png">
                  <img v-else :src=" website.axiosUrl + userInfoX.headUrl">
				  <img src="./../../public/img/indexlog/user.png">
                </div>
              </a></div>
            <div class="user">
              <div class="user-img">
                <span style="user-title"></span>
              </div>
              <div class="user-item">姓名：{{ userInfoX.name }}</div>
            </div>
          </div>
        </basic-container>
      </el-col> -->
  <!--   <el-col :md="17"
              :xs="24"
              :sm="24">
        <div class="basic-container">
          <div class="el-card is-always-shadow">
            <div class="el-card__body"><div class="data-box"><div class="el-row" span="24">
              <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12">
                <div class="item" @click="goLive(1)"><a href="javascript:void(0);">
                  <div class="item-icon" style="background-color: rgb(224, 0, 0);"><i class="icon-cuowu"></i></div>
                  <div class="item-info">
                    <span class="title" style="color: rgb(224, 0, 0);">{{ devNum.unusualNum }}</span>
                    <div class="info">异常设备</div>
                  </div></a>
                </div>
              </div>
              <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12">
                <div class="item" @click="goLive(2)"><a href="javascript:void(0);">
                  <div class="item-icon" style="background-color: rgb(56, 161, 242);"><i class="icon-shujuzhanshi2"></i></div>
                  <div class="item-info">
                    <span class="title" style="color: rgb(56, 161, 242);">{{ devNum.normalNum }}</span>
                    <div class="info">正常设备</div>
                  </div></a>
                </div>
              </div>
            </div></div></div></div></div>
      </el-col> -->
    <!-- </el-row> -->
    <div class="basic-container">
      <div class="el-card is-always-shadow">
        <div class="el-card__body">
          <div class="data-icons">
            <div class="el-row" span="24">
              <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 el-col-md-4">
                <div class="item item--easy">
                  <a href="javascript:void(0);" @click="goA('/appointment/calendar')">
                    <div class="item-icon" style="color: rgb(63, 161, 255);">
                      <img style="width: 50px; height: 50px;" src="./../../public/img/indexlog/log1.png" alt="">
                    </div>
                    <div class="item-info"><span>设备预约日历</span><span class="count" style="color: rgb(63, 161, 255);"></span></div></a>
                </div>
              </div>
              <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 el-col-md-4">
                <div class="item item--easy">
                  <a href="javascript:void(0);" @click="goA('/aintenance/calendar')">
                    <div class="item-icon" style="color: rgb(63, 161, 255);">
                      <img style="width: 50px; height: 50px;" src="./../../public/img/indexlog/log2.png" alt="">
                    </div>
                    <div class="item-info"><span>设备维保日历</span><span class="count" style="color: rgb(63, 161, 255);"></span></div>
                  </a>
                </div>
              </div>
              <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 el-col-md-4">
                <div class="item item--easy">
                  <a href="javascript:void(0);" @click="goA('/appointment/apply')">
                    <div class="item-icon" style="color: rgb(63, 161, 255);">
                      <img style="width: 50px; height: 50px;" src="./../../public/img/indexlog/log3.png" alt="">
                    </div>
                    <div class="item-info">
                      <span>设备预约</span>
                      <span class="count" style="color: rgb(63, 161, 255);"></span>
                    </div>
                  </a>
                </div>
              </div>
              <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 el-col-md-4">
                <div class="item item--easy">
                  <a href="javascript:void(0);" @click="goA('/appointment/lend')">
                    <div class="item-icon" style="color: rgb(63, 161, 255);">
                      <img style="width: 50px; height: 50px;" src="./../../public/img/indexlog/log4.png" alt="">
                    </div>
                    <div class="item-info">
                      <span>设备借用</span>
                      <span class="count" style="color: rgb(63, 161, 255);"></span>
                    </div>
                  </a>
                </div>
              </div>
              <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 el-col-md-4">
                <div class="item item--easy">
                  <a href="javascript:void(0);" @click="goA('/consumablesReceive/apply')">
                    <div class="item-icon" style="color: rgb(63, 161, 255);">
                      <img style="width: 50px; height: 50px;" src="./../../public/img/indexlog/log5.png" alt="">
                    </div>
                    <div class="item-info">
                      <span>耗材领用申请</span>
                      <span class="count" style="color: rgb(63, 161, 255);"></span>
                    </div>
                  </a>
                </div>
              </div>
              <div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 el-col-md-4">
                <div class="item item--easy">
                  <a href="javascript:void(0);" @click="goA('/dangerousReceive/apply')">
                    <div class="item-icon" style="color: rgb(63, 161, 255);">
                      <img style="width: 50px; height: 50px;" src="./../../public/img/indexlog/log6.png" alt="">
                    </div>
                    <div class="item-info">
                      <span>危险品领用申请</span>
                      <span class="count" style="color: rgb(63, 161, 255);"></span>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <basic-container>
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background: '#F8FBFF'}">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="trainStatus" label="培训状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.trainStatus === 0 ? '未完成' : '完成' }}
          </template>
        </el-table-column>
        <el-table-column prop="theme" label="培训主题" align="center"></el-table-column>
        <el-table-column prop="date" label="培训日期" align="center">
          <template slot-scope="scope">
            {{scope.row.startTime}} <span>至</span> {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="培训人" align="center"></el-table-column>
        <el-table-column prop="trainMaterials" label="资料" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleInfo1(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="signNum" label="参培/签到成员" align="center">
          <template slot-scope="scope">
            {{scope.row.ginseng !== null ? scope.row.ginseng : '0'}}<span>/</span>{{ scope.row.checkIn }}
          </template>
        </el-table-column>
        <el-table-column prop="url" label="现场照片" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleInfo2(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleInfo(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-sizes="sizes"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: right; margin-top: 20px;">
      </el-pagination>
    </basic-container>

    <el-dialog :visible.sync="pictureAlert" title="现场照片" width="620px" :close-on-click-modal="true" :show-close="true">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in pictureList" :key="item.id">
          <img style="width: 100%; height: 100%" :src="website.axiosUrl + item.path">
        </el-carousel-item>
      </el-carousel>
    </el-dialog>


    <el-dialog :visible.sync="informationAlert" title="资料下载" width="420px" :close-on-click-modal="true" :show-close="true">
      <div class="down-ul">
        <div class="down-li" v-for="item in informationList" :key="item.name">
          <span class="name">{{ item.name }}</span>
          <a class="btn" :href="website.axiosUrl + item.path" download="filename">下载</a>
        </div>
      </div>
    </el-dialog>
     
  </div>
</template>

<script>
import {
  getTrainFormList,
  findEquipmentIsStatusNum
} from '@/api/equipment/train/management'
import website from "@/const/website";
import { setStore, getStore } from '@/util/store';
export default {
  name: "wel",
  data () {
    return {
      website: website, // 地址
      userInfoX: getStore({ name: "userInfoData" }), // 用户信息

      devNum: { // 设备异常数量
        normalNum: 0,
        unusualNum: 0
      },

      tableData: [],
      total: 0,
      page: 1,
      size: 10,
      sizes: [5, 10, 20], // 表单

      pictureAlert: false, // 现场照片弹窗
      pictureList: [],

      informationAlert: false, // 资料弹窗
      informationList: [],

      easyDataOption2: {
        // color: 'rgb(63, 161, 255)',
        span: 6,
        discount: true,
        data: [
          {
            title: "设备预约日历",
            icon: "icon-cuowu",
            url:''
          },
          {
            title: "设备维保日历",
            icon: "icon-shujuzhanshi2"
          },
          {
            title: "设备预约",
            icon: "icon-jiaoseguanli"
          },
          {
            title: "设备借用",
            icon: "icon-caidanguanli"
          },
          {
            title: "耗材领用申请",
            icon: "icon-caidanguanli"
          },
          {
            title: "危险品领用申请",
            icon: "icon-caidanguanli"
          }
        ]
      },
      easyDataOption: {
        data: [
          {
            title: "异常设备",
            count: 12332,
            icon: "icon-cuowu",
            color: "rgb(224, 0, 0)"
          },
          {
            title: "正常设备",
            count: 33,
            icon: "icon-shujuzhanshi2",
            color: "rgb(56, 161, 242)"
          },
         /* {
            title: "权限管理",
            count: 2223,
            icon: "icon-jiaoseguanli",
            color: "rgb(117, 56, 199)"
          }*/
        ]
      }
    };
  },
  computed: {},
  created () { },
  mounted () {
    this._getTrainFormList()
    // this._findEquipmentIsStatusNum()

  },
  methods: {
    // 跳转仪表盘
    goLive(val) {
      this.$router.push({ path: '/aintenance/dashboard', query: { type: val } })
    },
    // 查询数量
    _findEquipmentIsStatusNum () {
      findEquipmentIsStatusNum({}).then(res => {
        if (res.data.code == 200) {
          this.devNum = res.data.data
        }
      })
    },
    // 查询表格
    _getTrainFormList() {
      let data = {
        page: this.page,
        size: this.size,
        trainManagement: {}
      }
      getTrainFormList(data).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total;
          this.page = res.data.data.pageNum;
          this.size = res.data.data.pageSize;
        }
      })
    },
    // 点击跳转路由
    goA(val) {
      this.$router.push({ path: val });
    },
    // 资料-查看
    handleInfo1(index, row) {
      this.informationAlert = true;
      this.informationList = Object.assign([] , row.fileList);
    },
    // 现场照片-查看
    handleInfo2(index, row) {
      this.pictureAlert = true;
      this.pictureList = Object.assign([] , row.photoList);
    },
    // 设置页size
    handleSizeChange (sizePage) {
      this.size = sizePage;
      this._getTrainFormList()
    },
    // 切页page
    currentChange(currentPage) {
      this.page = currentPage;
      this._getTrainFormList()
    },
  }
};
</script>

<style lang="scss">
.data-icons .item {
  margin: 0;
}
.wel-info {
  padding: 26px 0;
  .img-border {
    width: 64px;
    height: 65px;
    position: relative;
    vertical-align: middle;
    display: inline-block;
  }
  .img-v {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
  }
  .img {
    border-radius: 5px;
    width: 64px;
    height: 64px;
    display: inline-block;
    overflow: hidden;
    img {
      display: block;
      max-width: none;
      height: 64px;
      opacity: 1;
      width: 64px;
      margin-left: 0px;
      margin-top: 0px;
    }
  }
  .user {
    margin-left: 20px;
    display: inline-block;
    color: rgb(153, 153, 153);
    vertical-align: middle;
  }
  .user-title {
    font-size: 18px;
    color: rgb(102, 102, 102);
    margin-right: 5px;
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .user-subtitle {
    display: inline-block;
    width: 40px;
    height: 16px;
    line-height: 16px;
    border-radius: 2px;
    padding: 0px 5px;
    margin-left: 10px;
    font-size: 12px;
    text-align: center;
    color: rgb(255, 44, 84);
    background-color: rgb(255, 242, 244);
    white-space: nowrap;
  }
  .user-item {
    font-size: 12px;
    line-height: 20px;
  }
}
</style>
<style lang="scss" scoped>
  .down-ul {
    border-top: 1px solid #f2f2f2;
    width: 100%;
    .down-li {
      border-bottom: 1px solid #f2f2f2;
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        flex: auto;
      }
      .btn {
        display: inline-block;
        padding: 2px 10px;
        background: cornflowerblue;
        color: #ffffff;
        border-radius: 2px;
        cursor: pointer;
        flex: none;
        margin-left: 10px;
      }
    }
  }
</style>